<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>upload模块快速使用</title>
    <link rel="stylesheet" href="/ehome/static/css/layui.css" media="all">
    <!--layui的js部分-->
    <script src="/ehome/static/layui.js"></script>
</head>
<body>

<div class="layui-upload">
    <button type="button" class="layui-btn" id="upload_btn">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="imgPreview">
        <!--显示重新加载字样的p标签-->
        <p id="demoText"></p>
    </div>
</div>


<script>
    layui.use('upload', function(){
        var upload = layui.upload,$=layui.$;

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload_btn' //绑定元素
            ,url: '/ehome/upload' //上传接口
            //当图片选好之后,显示预览就需要before配置
            ,before: function(obj){
                obj.preview(function (index, file, result) {
                    $('#imgPreview').attr('src', result); //图片链接（base64）
                });
            }
            // 当图像上传完成后的回调
            ,done: function(res){
                if (res.code == 0){
                    console.log("fileName:"+res.fileName);
                    // 上传成功后,获取后端传回的文件名, 填充到表单的隐藏域上
                    // 当注册提交的时候, 该隐藏域会连同其他表单项一并提交给后端作注册操作
                    $("input[name=fileName]").val(res.fileName)
                    return layer.msg('文件上传成功!');
                }else if (res.code == 2) {
                    return layer.msg('不支持该上传类型');
                }else if (res.code == 3) {
                    return layer.msg('文件为空');
                }else {
                    return layer.msg('文件上传异常');
                }
            }
            ,error: function(){
                //请求异常回调
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
</script>
</body>
</html>
